@extends('layouts/main')
@section('content')
    <div style="padding: 15px;">
        @if($db_name)
            <div>
                <input type="hidden" id="db_name" value="{{$db_name}}">
                {{--<button class="layui-btn">保存</button>--}}
                <button class="layui-btn layui-btn-danger" onclick="javascript:history.back();">返回</button>
            </div>
            <form class="layui-form" action="">
                <table style="margin-top: 20px;">
                    <tr>
                        <td>
                            <div class="layui-form-item">
                            <label class="layui-form-label">表名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="table_name" required lay-verify="required" placeholder="表名称" autocomplete="off" class="layui-input table_name">
                            </div>
                            </div>
                        </td>
                        <td>
                            <div class="layui-form-item">
                              <label class="layui-form-label">表注释</label>
                              <div class="layui-input-inline">
                                  <input type="text" name="table_comment" placeholder="表注释" autocomplete="off" class="layui-input table_comment">
                              </div>
                            </div>
                        </td>
                        <td>
                          <div class="layui-form-item">
                            <label class="layui-form-label">引擎</label>
                            <div class="layui-input-inline">
                                <select name="engine" lay-verify="" lay-search class="engine">
                                  <option value="">请选择引擎</option>
                                </select>
                                <a href="javascript:;" class="engine-desc">引擎说明</a>
                            </div>
                          </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                说明：默认主键为自增ID
                            </div>
                        </td>
                    </tr>
                </table>
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>字段名称</th>
                    <th>类型</th>
                    <th>长度</th>
                    <th>不为空</th>
                    <th>默认值</th>
                    <th>注释</th>
                    <th>主键</th>
                    <th>自动递增</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="data_line">
               <tr name="field_line">
                   <th>
                       <div class="layui-input-inline">
                           <input type="text" name="name" required lay-verify="required" placeholder="字段名称" autocomplete="off" class="layui-input name">
                       </div>
                   </th>
                   <th>
                       <select name="type" lay-verify="" lay-search class="data-type type">
                           <option value="">请选择类型</option>
                       </select>
                   </th>
                   <th>
                       <div class="layui-input-inline">
                           <input type="text" name="data_l" placeholder="长度" autocomplete="off" class="layui-input length">
                       </div>
                   </th>
                   <th>
                       <div class="layui-input-inline">
                           <input type="checkbox" name="is_null" class="is_null" title="不为空" lay-skin="primary">
                       </div>
                   </th>
                   <th>
                       <div class="layui-input-inline" style="width: 150px; float: left;">
                           <select name="default" lay-verify="" lay-search class="default" lay-filter="default_value">
                               <option value="null">null</option>
                               <option value="">Empty String</option>
                               <option value="custom">自定义</option>
                           </select>
                       </div>
                       <input type="text" class="layui-input custom-default" placeholder="自定义时有效" style="width: 150px;">
                   </th>
                   <th>
                       <div class="layui-input-inline">
                           <input type="text" name="comment" placeholder="注释" autocomplete="off" class="layui-input comment">
                       </div>
                   </th>
                   <th>
                       <div class="layui-input-inline">
                            <input type="checkbox" name="primary_key" class="primary_key" title="主键" lay-skin="primary">
                       </div>
                   </th>
                   <th>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="is_auto_increment" class="is_auto_increment" title="自动递增" lay-skin="primary">
                        </div>
                   </th>
                   <th>
                       <div class="layui-input-inline">
                           <button class="layui-btn layui-btn-danger" type="button" onclick="deleteLine(this)">删除</button>
                       </div>
                   </th>
               </tr>
                </tbody>
            </table>
                <div>
                    <button class="layui-btn layui-btn-normal" type="button" onclick="addNewLine()">增加一行</button>
                </div>

                    <div style="margin-top: 20px;">
                        <button class="layui-btn submit-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
                        {{--<button type="reset" class="layui-btn layui-btn-primary">重置</button>--}}
                    </div>

            </form>
        @else
            无法获取到数据库
        @endif
    </div>
    <script type="text/javascript" src="/js/table.js"></script>

    <script type="text/javascript">
        layui.use('form', function(){
            var form = layui.form;
            form.render();
            // //监听提交
            form.on('submit(formDemo)', function(data){
                return false;
            });

            // form.on('select(default_value)', function (data) {
            //     console.log(data)
            //     if (data.value == 'custom') {
            //         $(this).find('.custom-default').show();
            //     } else {
            //         $(this).find('.custom-default').hide();
            //     }
            // })
        });



        $(function () {
            line = '';
            var res = sendAjaxRequest('GET', '/database/getAllDataType', {}, false);
            if (res.status == 0) {
                for (var i=0; i<res.data.length; i++) {
                    $('.data-type').append('<option value="'+res.data[i].DATA_TYPE+'">'+res.data[i].DATA_TYPE+'</option>')
                }
                line = $('#data_line').html();
                // console.log(line)
            }
            var res = sendAjaxRequest('GET', '/database/getAllEngine', {}, false);
            if (res.status == 0) {
                for (var i=0; i<res.data.length; i++) {
                  var selected = '';
                  if (res.data[i].Support == 'DEFAULT') {
                    selected = ' selected';
                  }
                  $('.engine').append('<option value="'+res.data[i].Engine+'"'+selected+'>'+res.data[i].Engine+'</option>')
                  
                }
                line = $('#data_line').html();
                // console.log(line)
            }
        })

        function addNewLine() {
            $('#data_line').append(line);
            layui.use('form', function() {
                var form = layui.form;
                form.render();
            })
        }

       function deleteLine(that){
            $(that).parent().parent().parent().remove();
        }

        $('.engine-desc').on('click', function () {
            layer.open({
                type: 2,
                title: '引擎说明',
                moveOut:true,
                area: ['900px', '550px'],
                content: '/layer/engineDesc',
            });
        })
    </script>
@endsection